<template>
  <view class="pay">
    <view v-if="!address" class="u-p-60 u-text-center">
      <u-button
        type="error"
        shape="circle"
        size="medium"
        plain
        @click="getAddress"
        >选择地址</u-button
      >
    </view>
    <view  @click="getAddress" v-else class="u-p-40">
      <view class="u-line-2">
        {{ detailAddress }}
      </view>
      <view class="u-m-t-20">
        <text>{{ address.userName }}</text
        ><text class="u-m-l-30">{{ address.telNumber }}</text>
      </view>
    </view>

    <u-line color="#ccc" />
    <u-line color="#ccc" />
    <u-line color="#ccc" />
    <u-line color="#ccc" />
    <u-line color="#ccc" />

    <view>
      <view class="u-p-30">已选商品</view>

      <view class="cart-list">
        <view
          v-for="goods in goodsCheckList"
          :key="goods.goods_id"
          class="cart-item"
        >
          <!-- 图片 -->
          <view class="cart-img">
            <u-image
              width="190rpx"
              height="190rpx"
              :src="goods.goods_small_logo"
            ></u-image>
          </view>
          <!-- 商品信息 -->
          <view class="cart-info">
            <view class="goods-name u-line-2">{{ goods.goods_name }}</view>
            <view class="goods-tool">
              <view class="goods-price">￥{{ goods.goods_price }}</view>
              <view class="goods-num-change">
                <view class="num-value">x{{ goods.num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部栏 -->
    <view class="statistics">
      <view class="cartSum">
        合计: <text class="rmb">￥</text
        ><text class="num">{{ totalPrice }}</text>
      </view>
      <view>
        <u-button
          @click="toPay"
          shape="circle"
          size="mini"
          active-color="red"
          :custom-style="{ backgroundColor: '#EA4350', color: '#fff' }"
          >去支付({{ totalNum }})</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters ,mapMutations} from "vuex";
export default {
  data() {
    return {
      // address: null,
    };
  },
  computed: {
    ...mapGetters(["goodsCheckList", "isAllCheck", "totalPrice", "totalNum","address"]),

    // 详细地址
    detailAddress() {
      if (!this.address) return "";
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
  methods: {
    ...mapMutations(["setAddress"]),
    // 去支付
    async toPay() {
      if (!this.address) {
        uni.showToast({ title: "请先选择地址!!", icon: "none" });
        return;
      }

      await this.$store.dispatch("handleToken")

      // //获取用户信息
      // const [err1, { encryptedData, rawData, iv, signature }] =
      //   await uni.getUserProfile({
      //     desc: "为了干坏事",
      //   });

      // //获取登录凭证code
      // const [err2, { code }] = await uni.login();
      // // console.log(code);

      // const tokenParams = {
      //   encryptedData,
      //   rawData,
      //   iv,
      //   signature,
      //   code,
      // };

      // //获取用户token
      // const res1 = await this.$u.post("/users/wxlogin", tokenParams);
      // const { token } = res1.message;
      // // console.log(token)

      const orderParams = {
        // 订单总价
        order_price: this.totalPrice,
        // 收货地址
        consignee_addr:
          this.detailAddress +
          "-" +
          this.address.userName +
          "-" +
          this.address.telNumber,
        goods: this.goodsCheckList.map((goods) => ({
          goods_id: goods.goods_id,
          goods_number: goods.num,
          goods_price: goods.goods_price,
        })),
      };
      // console.log(orderParams);

      //生成订单编号
      const res2 = await this.$u.post("/my/orders/create", orderParams);
      // console.log(res2)
      const { order_number } = res2.message;

      // 获取支付参数
      const res3 = await this.$u.post(
        "/my/orders/req_unifiedorder",
        { order_number }
      );
      // console.log(res3)
      const { pay } = res3.message;

      // 调用小程序API 弹起支付框
      const [err4, res4] = await uni.requestPayment(pay);
      // console.log(res4);

      //查询订单支付状态
      if (res4) {
        const res5 = await this.$u.post(
          "/my/orders/chkOrder",
          { order_number }
        );
        // console.log(res5);
        uni.showToast({ title: res5.message, icon: "none" });
      }
    },

    // 选择地址
    async getAddress() {
      const [err, res] = await uni.chooseAddress();
      //  console.log(res)
      // this.address = res;
      this.setAddress(res)
    },
  },
};
</script>

<style lang="scss" scoped>
.pay {
  padding-bottom: 83rpx;
}
.cart-list {
  .cart-item {
    padding: 20rpx;
    display: flex;

    .chk {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .checkbox {
      }
    }

    .cart-img {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cart-info {
      flex: 3;
      margin-left: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .u-line-2 {
      }

      .goods-tool {
        display: flex;
        justify-content: space-between;
        .goods-price {
          color: $theme-color;
        }

        .goods-num-change {
          display: flex;
          color: #666;

          .num-value {
            margin: 0 20rpx;
          }
        }
      }
    }
  }
}

.statistics {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 83rpx;
  width: 100%;
  padding: 0 23rpx;
  border-top: 1rpx solid #ccc;
  background-color: #fff;
  .allCheck {
    .checkbox {
      text {
        color: #8a8a8a;
        font-size: 21rpx;
      }
    }
  }

  .cartSum {
    flex: 1;
    margin-left: 30rpx;
    .rmb {
      font-size: 24rpx;
      margin-left: 10rpx;
      color: $theme-color;
    }

    .num {
      color: $theme-color;
    }
  }
}
</style>